<template>
   <div class="m-login">
            <div class="col-md-4 col-md-offset-4 col-xs-12">
                <div class="page-header">
                    <h1>桴之科 <small> 运维平台</small></h1>
                </div>
                <form id="js_form" noCheck="false" novalidate methods="post">
                    <div class="form-group" :class="{'has-error':!!errors.has('name')}">
                        <input class="form-control" type="text" placeholder="用户名" v-validate="'required|email'" name="user" v-model="user.name" />
                       <span class="text-danger" v-show="errors.has('name')">{{ errors.first('name') }}</span>
                    </div>
                    <div class="form-group" :class="{'has-error':!!errors.has('password')}">
                        <input class="form-control" name="password" type="password" placeholder="密码" v-validate="'required'" v-model="user.pw" />
                       <span class="text-danger" v-show="errors.has('password')">{{ errors.first('password') }}</span>
                    </div>
                    <div class="form-group" :class="{'has-error':!!errors.has('code')}">
                        <div class="input-group">
                            <input class="form-control" maxlength="4" placeholder="验证码" type="text" name='code' v-validate="'required'" v-model="user.code">
                            <div class="input-group-addon code-img" style="padding:0; margin:0;">
                                <img src="http://maintain.mysirui.com:40000/login/getAuthcodeImg" onclick="this.src='http://maintain.mysirui.com:40000/login/getAuthcodeImg?r='+ Math.random()"
                                    alt="">
                            </div>
                        </div>
                        <div class="clearfix row">
                            <div class="col-xs-12">
                                <p class="text-danger">{{ errors.first('code') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group text-center">
                        <button class="btn btn-primary btn-lg" type="button" @click="goCheck($event)" @keyup.enter="goCheck">登录</button>
                        <button class="btn btn-default" type="reset" @click="errors.clear()">重置</button>
                    </div>

                </form>
            </div>
        </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate, {
    Validator
  } from 'vee-validate';
  import zh from 'vee-validate/dist/locale/zh_CN'; //引入中文文件
  // 配置中文
  Validator.addLocale(zh);
  const config = {
    locale: 'zh_CN'
  };
  Vue.use(VeeValidate, config);
  export default {
    data() {
      return {
        logo: require('@/assets/img/logo.png'),
        user: {
          name: "aaa",
          pw: "",
          code: ""
        },
        size: '',
        totalSize: ""
      }
    },
    methods: {
      goCheck() {
        this.$validator.validateAll().then(function(success) {
          if (!success) return;
          alert("All good")
        })
      },
      handleLogin() {
        console.log('handleLogin');
      },
      fleshCode() {
        this.codeImg = '/sys/user/getImg?r=' + Math.random()
      }
    }
  }
</script>

<style>
html,body{height:100%;}
/*登录*/
.m-login{margin:0;padding:0;width:100%;height:100%; background-size: cover;background:url('../assets/img/bg.jpeg') no-repeat; background:#f2f2f2;}
.m-login .page-header{color:#021937;}
.m-login .page-header small{color:#41c1fc;}
.m-login .code-img{marin:0;padding:0;} 
.m-login .code-img img{max-height: 32px;} 
</style>